<template>
  <div class="EmergencyList">
    <div class="flex location-wrap" v-if='FilledBy.systemXitong != "system"'>
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EmergencyResources' }">应急资源</el-breadcrumb-item>
        <el-breadcrumb-item>物资台账</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" labelWidth="140px" :formData="formData"
        @node-click="deptChoose" @change="change" @handleTreeSelect="handleTreeSelect">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="130px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" @handleTreeSelect="handleTreeSelect" @node-click="deptChoose(arguments, item)" @change="change" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" @select-all="handleSelectionChange"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef"
        :actions="table.actions" ref="gjxm" :columns="table.columns" :title="table.title" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" @handleNodeClick="handleNodeClickAssetsUnit"
          @changeEvent="handleChangewz" />
        <DialogForm slot="slot2" ref="formComponent1" :formConfig="formConfig1" @changeEvent="handleChange" />
        <DialogForm slot="slot3" ref="formComponent2" :formConfig="formConfig2" />
      </LsdDialogTitle>
    </LsdDialog>
    <LsdDialog :dialogConfig="dialogConfig1" @handleBtn="handleBtn1" @close="close1">
      <div class="updr" slot="dialog">请选择您要导入的数据文件:</div>
      <DialogForm slot="dialog" ref="formComponent3" @handleBeforeUpload="((file) => { handleBeforeUpload(file, 2); })"
        :formConfig="formConfig3">
        <div slot="upload" class="upload">
          <div class="upload" @click.prevent.stop="noPrevent">
            <el-input class="sjgy" v-model="fileListName" :disabled="true"></el-input>
          </div>
          <el-button slot="trigger" type="primary">浏览</el-button>
          <el-button @click.stop="clear">清除</el-button>
        </div>
      </DialogForm>
      <div class="updrs" slot="dialog" @click.stop="onExports">下载模板文件</div>
      <div class="promptText" slot="dialog">{{ prompt }}</div>
    </LsdDialog>
  </div>
</template>

<script>
import { formData } from "./comps/configMaterial";
import { suppliesListPage } from "@/api/EmergencyResources/EmergencyResources.js";
import { downSupplies, getDicListlargeCategory, doImportSuppliesExcel, doSelectCascade, baseResourceSuppliesSave, baseResourceSuppliesUpdById, baseResourceSuppliesDetailsById, baseResourceSuppliExportByIds, baseResourceSuppliesDeleteByIds } from "@/api/EmergencyResources/clzb.js";
import { GetOrgTree } from "@/api/common.js";
import { getUnitTreeApi } from "@/api/EarlyWarningManagement/yjrb";
import { showTime } from "@/lib";
import common from "@/utils/common.js";
export default {
  data() {
    return {
      formData,
      form: {
      },
      table: {
        isSelectFlag: true, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "物资台账列表",
        actions: [
          {
            id: "dialogVisible",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          // {
          //   id: "dialogVisible",
          //   text: "研判",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
          {
            id: "dialogLeadingIn",
            text: "导入",
            type: "",
            btnAttr: { size: "small" }
          },
          {
            id: "onExport",
            text: "导出",
            type: "",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "unit",
            label: "所属单位",
            "min-width": "160px",
            "show-overflow-tooltip": true,
            align: "left"
          },
          {
            prop: "suppliesDescription",
            label: "物料描述",
            align: "left"
          },
          {
            prop: "suppliesCode",
            label: "物料编码",
            align: "left"
          },
          {
            prop: "largeCategory",
            label: "物资大类",
            align: "left"
          },
          {
            prop: "middleCategory",
            label: "物资中类",
            align: "left"
          },
          {
            prop: "smallCategory",
            label: "物资小类",
            align: "left"
          },
          {
            prop: "cklx",
            label: "仓库类型",
            align: "left"
          },
          {
            prop: "warehouse",
            label: "仓库名称",
            align: "left"
          },
          {
            prop: "warehouseId",
            label: "仓库编码",
            align: "left"
          },
          {
            prop: "count",
            label: "数量",
            align: "left"
          },
          {
            prop: "measure",
            label: "计量单位",
            align: "left"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "80px",
            render: (h, scope) => {
              // const arr = ["编辑", "删除"];
              var arr = [];
              if (this.FilledBy.systemXitong == "system") {
                arr = ["编辑", "删除"];
              } else {
                arr = [];
              }
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "380px",
          // height: "380px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
        // "page-sizes": [10, 20, 30, 40, 50, 100]
      },
      activeNames: ["1", "2", "3", "4"],
      fileListName: "",
      pageNum: 1,
      multipleSelection: [],
      // 弹窗信息
      dialogConfig: {
        title: "新增物资",
        isShow: false,
        btnList: [
          {
            name: "保存",
            id: "submitForm", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "getBack", // 事件名
            size: "small"
          }
        ]
      },
      // 弹窗信息
      dialogConfig1: {
        title: "数据导入",
        isShow: false,
        width: "60%",
        btnList: [
          {
            name: "导入数据",
            id: "Bsave", // 事件名
            size: "small",
            type: "primary"
          },
          {
            name: "取消",
            id: "getBacks", // 事件名
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "填报信息",
          name: "1",
          slot: "slot1"
        },
        {
          title: "仓库信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "填报信息",
          name: "3",
          slot: "slot3"
        }
      ],
      formConfig: {
        // disabled: true,
        formData: [
          {
            type: "input",
            label: "物资编码",
            class: "half",
            prop: "suppliesCode",
            lableWidth: "130px"
          },
          {
            type: "select",
            label: "物资大类",
            prop: "largeCategoryId",
            name: "largeCategory",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "select",
            label: "物资中类",
            prop: "middleCategoryId",
            name: "middleCategory",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "select",
            label: "物资小类",
            prop: "smallCategory",
            name: "smallCategoryName",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "input",
            label: "物料描述",
            prop: "suppliesDescription",
            class: "half",
            lableWidth: "130px"
          },
          {
            type: "select",
            label: "计量单位",
            name: "measureName",
            prop: "measure",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "input",
            label: "数量",
            prop: "count",
            class: "half",
            lableWidth: "130px"
          },
          {
            type: "selectTree",
            label: "所属单位",
            prop: "unit",
            name: "unitId",
            title: "所属单位选择",
            choose: false,
            isDisabled: false,
            multiple: false,
            keyWord: "keyWord",
            treeRef: "treeRef",
            commonClick: false,
            ref: "tree_select",
            class: "half",
            lableWidth: "130px",
            option: [],
            treeData: {
              data: [],
              default: ["1"],
              checked: [],
              props: {
                children: "children",
                label: "orgName",
                value: "id"
              }
            }
          }
        ],
        rules: {
          suppliesCode: [
            { required: true, message: "请输入物资编码", trigger: "change" }
          ],
          largeCategoryId: [
            { required: true, message: "请选择物资大类", trigger: "blur" }
          ],
          middleCategoryId: [
            { required: true, message: "请选择物资中类", trigger: "blur" }
          ],
          smallCategory: [
            { required: true, message: "请选择物资小类", trigger: "blur" }
          ],
          count: [
            { required: true, message: "请输入数量", trigger: "change" }
          ],
          unitId: [
            { required: true, message: "请选择所属单位", trigger: "blur" }
          ]
        }
      },
      formConfig1: {
        formData: [
          {
            type: "input",
            label: "仓库类型",
            prop: "cklx",
            class: "half",
            lableWidth: "130px"
            // option: [
            //   {
            //     label: "测试仓库",
            //     value: "1"
            //   }
            // ]
          },
          {
            type: "input",
            label: "仓库名称",
            prop: "warehouse",
            class: "half",
            lableWidth: "130px"
            // option: [
            //   {
            //     label: "测试仓库名称",
            //     value: "1"
            //   }
            // ]
          },
          {
            type: "input",
            label: "仓库编码",
            prop: "warehouseId",
            class: "half",
            lableWidth: "130px"
          }
        ]
      },
      formConfig2: {
        formData: [
          {
            type: "input",
            label: "创建人",
            prop: "creator",
            isDisabled: true,
            class: "third",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "creatorUnit",
            class: "third",
            isDisabled: true,
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "创建时间",
            prop: "createTime",
            isDisabled: true,
            class: "third",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "最后一次填报人",
            prop: "modifier",
            isDisabled: true,
            class: "third",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "单位及部门",
            prop: "modifyUnit",
            class: "third",
            isDisabled: true,
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "最后更新时间",
            prop: "modifyTime",
            isDisabled: true,
            class: "third",
            lableWidth: "130px"
          }
        ]
      },
      formConfig3: {
        formData: [
          {
            type: "upload",
            label: "",
            prop: "ztqks",
            slot: "upload",
            action: "#",
            accept: "*",
            class: "sjgy",
            customize: true,
            tip: "温馨提示：请选择以.xlsx为后缀名的文件！",
            limit: 1,
            lableWidth: "130px"
          }
        ]
      },
      FilledBy: {},
      type: 0,
      id: "",
      prompt: "",
      PromptVerification: "",
      promptCode: 0
    };
  }, mounted() {
    this.query();
    GetOrgTree().then(res => {
      this.formData[0].treeData.attrs.data = res;
    });
    getDicListlargeCategory({ code: "yz_wz_wzfl" }).then(res => {
      this.formData[3].options = res.map((item) => {
        return {
          label: item.dicName,
          value: item.id
        };
      });
    });
    // 查询 仓库类型
    getDicListlargeCategory({ code: "dic_cklx" }).then(res => {
      this.formData[6].options = res.map((item) => {
        return {
          label: item.dicName,
          value: item.dicName
        };
      });
    });
    const FilledBy = {
      systemXitong: JSON.parse(sessionStorage.getItem("role")).roleCode,
      creator: JSON.parse(sessionStorage.getItem("account")).realName,
      creatorId: JSON.parse(sessionStorage.getItem("account")).id,
      createDeptId: JSON.parse(sessionStorage.getItem("org")).orgCode,
      creatorUnit: sessionStorage.getItem("dwbmName"),
      createTime: showTime(new Date()),
      modifier: JSON.parse(sessionStorage.getItem("account")).realName,
      modifyTime: showTime(new Date()),
      modifyUnit: sessionStorage.getItem("dwbmName")
    };
    this.FilledBy = FilledBy;
    if (this.FilledBy.systemXitong != "system") {
      this.table.actions = [
        {
          id: "onExport",
          text: "导出",
          type: "",
          btnAttr: { size: "small" }
        }
      ];
    } else {
      this.table.actions = [
        {
          id: "dialogVisible",
          text: "新增",
          type: "primary",
          btnAttr: { size: "small" }
        },
        // {
        //   id: "dialogVisible",
        //   text: "研判",
        //   type: "",
        //   btnAttr: { size: "small" }
        // }
        {
          id: "dialogLeadingIn",
          text: "导入",
          type: "",
          btnAttr: { size: "small" }
        },
        {
          id: "onExport",
          text: "导出",
          type: "",
          btnAttr: { size: "small" }
        }
      ];
    }
  },
  methods: {
    // 筛选条件根据大类选择中类到小类
    change(vale, item) {
      if (item.label === "物资大类") {
        doSelectCascade({ pid: vale[0] }).then(res => {
          this.formData[4].options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.id
            };
          });
        });
        const name = item.options.find(item => item.value === vale[0]);
        this.$set(this.form, "largeCategory", name.label);
        if (this.form.largeCategory) { // 每次重新选择大类清空小类和中类
          this.$set(this.form, "middleCategory", "");
          this.$set(this.form, "smallCategory", "");
        }
      } else if (item.label === "物资中类") {
        doSelectCascade({ pid: vale[0] }).then(res => {
          this.formData[5].options = res.map((item) => {
            return {
              label: item.dicName,
              value: item.id
            };
          });
        });
        const name = item.options.find(item => item.value === vale[0]); // 获取当前选中值得name
        this.$set(this.form, "middleCategory", name.label); // 获取name传给后端
        if (this.form.middleCategory) {
          this.$set(this.form, "smallCategory", "");
        }
      } else if (item.label === "物资小类") {
        const name = item.options.find(item => item.value === vale[0]);
        this.$set(this.form, "smallCategory", name.label);
      }
    },
    // 分页
    handleSizeChange(val) {
      this.form["pageNum"] = val["current-page"];
      this.form["pageSize"] = val["page-size"];
      this.query();
    },
    // 选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 仓库
    handleChange(val, item) {
      console.log(val, item);
      // if (item.label === "所属部门") {
      //   selectOrganizationDetailPCByidVo({ id: val }).then(res => {
      //     this.formConfig1.formData.forEach((item) => {
      //       if (item.label === "所属班组") {
      //         const option = res.map((item) => {
      //           return {
      //             label: item.cityName,
      //             value: item.id
      //           };
      //         });
      //         item.option = option;
      //       }
      //     });
      //     if (this.$refs.formComponent1.form.belongTeam) {
      //       this.$set(this.$refs.formComponent1.form, "belongTeam", "");
      //       this.$set(this.$refs.formComponent1.form, "belongTeamId", "");
      //     }
      //   });
      // }
    },
    // 所属单位选择
    handleNodeClickAssetsUnit(data, node, item) {
      if (item.label === "所属单位") {
        this.$set(this.$refs.formComponent.form, "unit", data.orgName);
        this.$set(this.$refs.formComponent.form, "unitId", data.id);
      }
    },
    // 根据大类查询中类查询小类
    handleChangewz(val, item) {
      if (item.label === "物资大类") {
        doSelectCascade({ pid: val }).then(res => {
          this.formConfig.formData.forEach((item) => {
            if (item.label === "物资中类") {
              const option = res.map((item) => {
                return {
                  label: item.dicName,
                  value: String(item.id)
                };
              });
              item.option = option;
            }
          });
          if (this.$refs.formComponent.form.middleCategory) {
            this.$set(this.$refs.formComponent.form, "middleCategory", "");
            this.$set(this.$refs.formComponent.form, "middleCategoryId", "");
            this.$set(this.$refs.formComponent.form, "smallCategory", "");
            this.$set(this.$refs.formComponent.form, "smallCategoryId", "");
          }
        });
      } else if (item.label === "物资中类") {
        doSelectCascade({ pid: val }).then(res => {
          this.formConfig.formData.forEach((item) => {
            if (item.label === "物资小类") {
              const option = res.map((item) => {
                return {
                  label: item.dicName,
                  value: String(item.id)
                };
              });
              item.option = option;
            }
          });
          if (this.$refs.formComponent.form.smallCategory) {
            this.$set(this.$refs.formComponent.form, "smallCategory", "");
            this.$set(this.$refs.formComponent.form, "smallCategoryId", "");
          }
        });
      }
    },
    // 新增弹窗下拉框赋值
    getOrgTree() {
      this.formConfig.formData.forEach((item) => {
        if (item.label === "所属单位") {
          getUnitTreeApi().then(res => {
            item.treeData.data = res;
          });
        } else if (item.label === "物资大类") {
          getDicListlargeCategory({ code: "yz_wz_wzfl" }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: String(item.id)
              };
            });
            item.option = option;
          });
        } else if (item.label === "计量单位") {
          getDicListlargeCategory({ code: "yz_zb_jldw" }).then(res => {
            const option = res.map((item) => {
              return {
                label: item.dicName,
                value: String(item.id)
              };
            });
            item.option = option;
          });
        }
      });
    },
    // 取消
    getBack() {
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent1.$options.data().form;
      this.formConfig.formData.forEach((item) => {
        if (item.label === "物资中类" || item.label === "物资小类") {
          item.option = [];
        }
      });
      this.$nextTick(() => {
        this.$refs.formComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();
      });
      this.dialogConfig.isShow = false;
    },
    // 提交
    submitForm() {
      this.$refs.formComponent.isValidate();
      this.$refs.formComponent1.isValidate();
      const flag = this.$refs.formComponent.flag;
      const flag1 = this.$refs.formComponent1.flag;
      if (flag && flag1) {
        const pamams = {
          suppliesCode: this.$refs.formComponent.form.suppliesCode,
          largeCategoryId: this.$refs.formComponent.form.largeCategoryId,
          largeCategory: this.$refs.formComponent.form.largeCategory,
          middleCategory: this.$refs.formComponent.form.middleCategory,
          middleCategoryId: this.$refs.formComponent.form.middleCategoryId,
          smallCategory: this.$refs.formComponent.form.smallCategoryName,
          suppliesDescription: this.$refs.formComponent.form.suppliesDescription,
          measure: this.$refs.formComponent.form.measureName ? this.$refs.formComponent.form.measureName : "",
          count: this.$refs.formComponent.form.count,
          unit: this.$refs.formComponent1.form.unit,
          unitId: this.$refs.formComponent1.form.unitId,
          warehouseId: this.$refs.formComponent1.form.warehouseId,
          cklx: this.$refs.formComponent1.form.cklx,
          warehouse: this.$refs.formComponent1.form.warehouse,
          modifier: JSON.parse(sessionStorage.getItem("account")).realName,
          modifyTime: this.FilledBy.createTime,
          modifyUnit: JSON.parse(sessionStorage.getItem("org")).orgName,
          creator: this.$refs.formComponent2.form.creator,
          creatorUnit: this.$refs.formComponent2.form.creatorUnit
        };
        if (this.type === 1) {
          baseResourceSuppliesSave(pamams).then(res => {
            if (res) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.query();
              this.dialogConfig.isShow = false;
            }
          });
        } else if (this.type === 2) {
          pamams.id = this.id;
          baseResourceSuppliesUpdById(pamams).then(res => {
            if (res) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.query();
              this.dialogConfig.isShow = false;
            }
          });
        }
      }
    },
    // 筛选
    query() {
      delete this.form.unitId;
      suppliesListPage(this.form).then(res => {
        this.table.tableData = res.data;
        this.paginationAtrrs.total = res.total;
      });
    },
    // 列表表格按钮事件
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.HanEdit(scope.row);
      } else if (item === "删除") {
        this.detailForm(scope.row);
      }
    },
    reset() {
      this.form = this.$options.data().form;
      this.$refs.gjxm.paginationAtrrsInner["current-page"] = 1;
      this.query();
    },
    deptChoose(arg, item) {
      // this.$set(this.form, "unit", arg[0].orgName);
      // this.$set(this.form, "unitId", arg[0].id);
    },
    handleTreeSelect(value) {
      const orgName = value[0].map(item => { return item.orgName; });
      const id = value[0].map(item => { return item.id; });
      this.$set(this.form, "unitIds", id.splice(","));
      this.$set(this.form, "unitId", orgName.splice(","));
    },
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    handleBtn(item) {
      this[item.id]();
    },
    handleBtn1(item) {
      this[item.id]();
    },
    // 新增
    dialogVisible() {
      this.dialogConfig.isShow = true;
      this.type = 1;
      this.$nextTick(() => {
        this.$refs.formComponent2.form = this.FilledBy;
      });
      this.getOrgTree();
    },
    // 清除导入模板得内容
    clear() {
      this.$refs.formComponent3.fileList = [];
      this.fileListName = "";
      this.prompt = "";
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
      });
    },
    // 下载模板
    onExports() {
      downSupplies().then(res => {
        common.downloadByBlob(res, `物资台账模板${new Date().getTime()}.xlsx`);
      });
    },
    // 去掉字符串大括号
    removeBlock(str) {
      if (str) {
        var reg = /^\{/gi;
        var reg2 = /\}$/gi;
        str = str.replace(reg, "");
        str = str.replace(reg2, "");
        return str;
      } else {
        return str;
      }
    },
    // 导入模板
    handleBeforeUpload(file, val) {
      this.file = file;
      doImportSuppliesExcel(this.common.convertFormData({ multipartFile: file })).then(res => {
        res.text().then(data => {
          // data：指成功读取到的内容
          const datas = JSON.parse(data);
          this.promptCode = datas.code;
          this.PromptVerification = datas.data;
          if (datas.code === 200 && datas.data !== "{}") {
            // this.prompt = this.removeBlock(datas.data);
          } else if (datas.data === "{}") {
            console.log(";;;;");
          }
        }).catch(err => {
          // err： 指读取失败后返回的错误内容
        });
      });
      this.$nextTick(() => {
        this.$refs.formComponent3.form.ztqks = file.name;
        this.fileListName = file.name;
      });
    },
    // 编辑
    HanEdit(val) {
      this.dialogConfig.isShow = true;
      this.type = 2;
      this.getOrgTree();
      baseResourceSuppliesDetailsById({ id: val.id }).then(res => {
        this.id = res.id;
        this.$set(this.$refs.formComponent2.form, "modifier", res.modifier || JSON.parse(sessionStorage.getItem("account")).realName);
        this.$set(this.$refs.formComponent2.form, "modifyTime", res.modifyTime || this.FilledBy.createTime);
        this.$set(this.$refs.formComponent2.form, "modifyUnit", res.modifyUnit || JSON.parse(sessionStorage.getItem("org")).orgName);
        if (res.largeCategoryId) {
          doSelectCascade({ pid: res.largeCategoryId }).then(data => {
            this.formConfig.formData.forEach((item) => {
              if (item.label === "物资中类") {
                const option = data.map((item) => {
                  return {
                    label: item.dicName,
                    value: String(item.id)
                  };
                });
                item.option = option;
              }
            });
          });
        }
        if (res.middleCategoryId) {
          doSelectCascade({ pid: res.middleCategoryId }).then(data => {
            this.formConfig.formData.forEach((item) => {
              if (item.label === "物资小类") {
                const option = data.map((item) => {
                  return {
                    label: item.dicName,
                    value: String(item.id)
                  };
                });
                item.option = option;
              }
            });
          });
        }
        this.$refs.formComponent.form = res;
        this.$refs.formComponent1.form = res;
        this.$refs.formComponent2.form = res;
      });
    },
    // 导入
    dialogLeadingIn() {
      this.dialogConfig1.isShow = true;
    },
    // 导出操作
    onExport() {
      if (this.multipleSelection.length <= 0) {
        this.$message({
          message: "请至少选择一条数据",
          type: "warning"
        });
      } else if (this.multipleSelection.length >= 1) {
        const arr = [];
        this.multipleSelection.map((item, index) => {
          arr.push(item.id);
        });
        baseResourceSuppliExportByIds(arr).then(res => {
          if (res) {
            common.downloadByBlob(res, `车辆台账${new Date().getTime()}.xlsx`);
            this.$message({
              message: "导出成功",
              type: "success"
            });
          }
        });
      }
    },
    // 导入数据按钮
    Bsave() {
      if (this.PromptVerification === "{}" && this.promptCode === 200) {
        this.$message({
          message: "导入成功",
          type: "success"
        });
        this.query();
        this.dialogConfig1.isShow = false;
      } else if (this.PromptVerification !== "{}" && this.promptCode === 200) {
        this.$message({
          message: "导入模板数据不正确,请根据提示进行修改",
          type: "error"
        });
      } else if (this.promptCode === -1) {
        this.$message({
          message: "系统异常,请联系管理员",
          type: "error"
        });
      } else {
        this.$message({
          message: "请选择模板",
          type: "error"
        });
      }
    },
    // 删除
    detailForm(val) {
      var tarra = val.id.split(",");
      this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        baseResourceSuppliesDeleteByIds([tarra.toString()]).then(data => {
          if (data) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.query();
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    close() {
      this.getBack();
    },
    close1() {
      this.$refs.formComponent3.fileList = [];
      this.fileListName = "";
      this.prompt = "";
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
      });
      this.dialogConfig1.isShow = false;
    }
  }
};

</script>

<style lang='less' scoped>
@import "../../assets/style/common.less";
@import "../../assets/style/ComponentStyle.less";
@import "../../assets/style/pop-upNotification.less";

.upload {
  width: 100%;
  display: flex;
  align-items: center;
  margin-left: 10px;

  :deep(.el-input__inner) {
    width: 98%;
    color: rgb(10, 99, 241);
    text-decoration: underline;
  }

  :deep(.el-button) {
    padding: 9px 15px !important;
  }
}

:deep(.el-upload__tip) {
  font-size: 15px;
  color: red;
  margin: 10px 0;
  margin-left: 19px;
}

:deep(.el-dialog__body) {
  position: relative;
}

.updr {
  font-weight: 700;
  font-style: normal;
  color: #555555;
  font-size: 20px;
  text-indent: 19px;
  margin: 10px 0;
}

:deep(.el-upload-list__item-name) {
  margin-left: 16px;
}

.promptText {
  margin-left: 19px;
  font-size: 15px;
  color: red;
  // text-indent: 19px;
}

.updrs {
  font-style: normal;
  color: #1723c4;
  font-size: 15px;
  text-indent: 19px;
  width: 110px;
  position: absolute;
  text-decoration: underline;
  cursor: pointer;
  top: 112px;
  left: 300px;
}

:deep(.el-upload) {
  width: 100% !important;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-descriptions-item__label:not(.is-bordered-label)) {
  margin-right: 5px;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-form-item__label) {
  font-size: 16px;
}

.doc-box {
  border: 1px solid #d9d9d9;
  padding: 20px 0 10px 0;
  // max-height: 570px;
  // overflow-y: auto;

  .doc-item {
    position: relative;
    padding: 10px 5px 0 5px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #d7d7d7;
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30%;
      z-index: 1;
    }

    .checkbox {
      position: absolute;
      right: 10px;
      top: 5px;
      zoom: 200%;
    }

    :deep(.el-descriptions :not(.is-bordered) .el-descriptions-item__cell) {
      padding-bottom: 4px;
    }

    :deep(.el-descriptions__body) {
      background-color: transparent;
    }

    .doc-img {
      width: 80px;
      height: 80px;
      vertical-align: middle;
      margin-bottom: 5px;
    }

    :deep(.doc-label) {
      width: 60px;
      justify-content: flex-end;
    }

    :deep(.el-checkbox__inner::after) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__inner) {
      border-color: #3270ff;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #fff;
    }
  }

  .active-doc {
    background-color: #fff;
    border-color: #3270ff;

    :deep(.el-descriptions__body) {
      // color: #3270ff;
    }
  }
}

.fm-box {
  display: flex;

  .fm-img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }

  .fm-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 160px;
    color: #606266;

    .upload-btn {
      position: relative;
      width: 114px;
      cursor: pointer;

      &:hover {
        :deep(.el-button) {
          border-color: #409eff;
        }
      }

      #fm-btn {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 114px;
        height: 36px;
        z-index: 1;
      }

      :deep(.el-button) {
        padding: 9px 40px;
        font-size: 16px;

        span {
          text-decoration: underline;
          color: #3270ff;
        }
      }
    }
  }
}

/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  font-size: 26px;
  position: relative;
  top: 8px;
}

/deep/.el-button--small {
  font-size: 16px;
}

/deep/.el-button--mini {
  font-size: 16px;
}

/deep/.fileLevel .el-select-dropdown__item {
  padding-left: 20px;
}
</style>

